import {Button, Card, Col, Row} from 'antd';
import React, {useEffect, useState} from 'react';
import {history, useParams} from "umi";
import {getInterfaceInfoByIdUsingGET, invokeUsingPOST} from "@/services/lapi-backend/interfaceinfoAdmin";


import JSONView, {InteractionProps} from 'react-json-view';
import {ArrowLeftOutlined} from "@ant-design/icons";

const Invoke: React.FC = () => {
  const params = useParams()
  const idRequest: API.IdRequest = params
  const [interfaceInfo, setInterfaceInfo] = useState<API.InterfaceInfo>({})
  const [result, setResult] = useState<string>('{}')
  const [invokeData, setInvokeData] = useState<API.InterfaceInfoInvokeRequest>({id: 0, requestParam: ''})
  const [jsonData, setJsonData] = useState<any>({})
  useEffect(() => {
    getInterfaceInfoByIdUsingGET(idRequest, {}).then(r => {
      if (r.data == null) {
        return;
      }
      setInvokeData({id: r.data.id, requestParam: r.data.requestParam})
      setJsonData(JSON.parse(r.data.requestParam == undefined ? "{}" : r.data.requestParam))
      setInterfaceInfo(r.data as API.InterfaceInfo)
    })
  }, [])

  function handleChange(e: InteractionProps) {
    setJsonData(e.updated_src);
  }

  const isJsonData = (data): boolean => {
    try {
      JSON.parse(data);
      return true;
    } catch (e) {
      return false;
    }
  }

  const invoke = () => {
    setInvokeData({id: invokeData.id, requestParam: JSON.stringify(jsonData)})
    invokeUsingPOST(invokeData, {}).then(res => {
      if (isJsonData(res)) {
        setResult('{"data":"","code":500,"message":"接口返回数据错误"}')
        return;
      }
      if (!isJsonData(res.data)) {
        setResult('{"data":"","code":500,"message":"接口数据错误"}')
        return;
      }

      if (res.code != 0) {
        setResult(res.message as string)
      } else
        setResult(res.data as string)
    })
  }
  return (
    <Row>
      <Col span={10}>
        <Card title={<>
          <Button type={"link"} onClick={() => {
            history.goBack()
          }
          }>
            {<ArrowLeftOutlined/>}返回
          </Button>
          {interfaceInfo.name}
        </>
        } bordered={true} style={{height: 800}}>
          <p>接口名 ： {interfaceInfo.name}</p>
          <p>请求地址 ： {interfaceInfo.url}</p>
          <p>请求方法 ：{interfaceInfo.method}</p>
          <p>请求路径：{interfaceInfo.path}</p>
          <p>请求头：{interfaceInfo.requestHeader}</p>
          <p>请求参数： <JSONView
            src={JSON.parse(interfaceInfo.requestParam == undefined ? "{}" : interfaceInfo.requestParam as string)}
            displayDataTypes={true}
            theme={"ashes"}
            enableClipboard={false}
            displayObjectSize={false}
            name={false}/>
          </p>
          <p>响应头： {interfaceInfo.responseHeader}</p>
          <p>接口状态： {interfaceInfo.status == 0 ? "关闭" : "开启"}</p>
          请求参数示例:

          <JSONView src={(jsonData)}
                    displayDataTypes={false}
                    name={false}
                    displayObjectSize={false}
                    enableClipboard={false}
                    onEdit={(edit) => {
                      handleChange(edit)
                    }}
                    onAdd={add => {
                      handleChange(add)
                    }}
                    onDelete={(del) => {
                      handleChange(del)
                    }}
                    theme={"ocean"}/>
          <Button type="primary" size={"large"} style={{margin: " 10px auto"}}
                  onClick={() => invoke()}
          >
            发送请求
          </Button>
        </Card>
      </Col>
      <Col span={14}>
        <Card title={"调用结果"} bordered={true} style={{height: 800}}>
          <JSONView src={JSON.parse(result)}
                    displayDataTypes={false}
                    displayObjectSize={false}
                    theme={"ocean"} name={false}/>
        </Card>
      </Col>
    </Row>
  )
};
export default Invoke;
